/**
* 团队管理
*/
import React, { Component } from 'react';
import { View, StyleSheet, Text, Image, TouchableOpacity, FlatList, TextInput, DeviceEventEmitter, Linking } from "react-native";
import { connect } from 'react-redux';
import { create_service } from '../../redux/index.js';
import { Contract } from '../../service/index.js';
import { Colors, Dimens, ImageRes } from '../../utils/Assets';
import { ProgressView } from '../custom/index'
import { Actions } from 'react-native-router-flux';
import { getStore } from '../../redux/index.js';
import ScrollableTabView from 'react-native-scrollable-tab-view'
class TeamManagerListView extends Component {

    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            refreshing: false,
            team_list: [],
            tabbarName: ['全部', '已激活', '未激活'],
            currentIndex: 0
        }
        this.pageSize = 10
        this.page = 1
        this.userInfo = getStore().getState().auth.userInfo
    }

    componentDidMount() {
        this.listener = DeviceEventEmitter.addListener('ChangeIndex', (value) => {
            this.setState({ currentIndex: value.index })
        })
    }
    componentWillUnmount() {
        this.listener && this.listener.remove()
    }
    render() {
        return (
            <View style={styles.container}>
                <View style={{ backgroundColor: "#ffffff" }}>
                    <View style={{ backgroundColor: "#F7F7F7", marginHorizontal: 15, borderRadius: 10, flexDirection: 'row', paddingHorizontal: 15, marginTop: 15 }}>
                        <Image source={ImageRes.team_serch} style={{ width: 20, height: 20, alignSelf: 'center' }}></Image>
                        <TextInput style={{ fontSize: 15, color: '#333333', height: 40, flex: 1, paddingHorizontal: 15 }}
                            onChangeText={(text) => {
                                this.searchText = text
                            }}
                            placeholderTextColor={'#999999'}
                            underlineColorAndroid={'transparent'}
                            placeholder={'搜索用户名或者手机号'}
                            returnKeyType={'search'}
                            onSubmitEditing={() => {
                                this.setState({ searchText: this.searchText })
                            }}
                        />
                        <TouchableOpacity style={{ justifyContent: 'center' }} activeOpacity={0.8} onPress={() => { }}>
                            <Text style={{ fontSize: 15, color: "#999999", alignSelf: 'center' }}>取消</Text>
                        </TouchableOpacity>
                    </View>
                </View>
                <View style={{ flex: 1 }}>
                    <ScrollableTabView
                        locked={true}
                        renderTabBar={() => <TabBar />}>
                        {
                            this.state.tabbarName.map((item, index) => {
                                return (
                                    <SubView key={index} usersId={this.props.users_id} tabLabel={item} index={index} dispatch={this.props.dispatch} userInfo={this.userInfo} searchText={this.state.searchText} index={index} />
                                )
                            })
                        }
                    </ScrollableTabView>
                </View>
            </View>
        )
    }
}
class SubView extends Component {
    constructor(props) {
        super(props)
        this.state = {
            team_list: [],
            refreshing: false,
            loading: false
        }
        this.pageSize = 10
        this.page = 1
        this.titleArr = ['类型', '直营', '团队', '总额']
    }
    componentDidMount() {
        this.getDataList(true)
    }
    componentWillReceiveProps(nextProps) {
        if (this.props.searchText != nextProps.searchText) {
            this.setState({ searchText: nextProps.searchText }, () => {
                this.page = 1
                this.getDataList(true)
            })
        }
    }
    getDataList(refresh) {
        if (refresh) {
            this.setState({ refreshing: true })
        } else {
            this.setState({ loading: true })
        }
        let params = {
            page: this.page,
            pageSize: this.pageSize,
            token: this.props.userInfo.token,
            users_id: this.props.usersId,
            activate: this.props.index == 0 ? null: this.props.index == 1 ? "1" : "0"
        }
        console.log("=============>");
        console.log(this.props.userInfo)
        console.log(params);
        if (this.state.searchText) {
            params.search = this.state.searchText
        }
        this.props.dispatch(create_service(Contract.POST_USER_DIRECT_CHILD, params)).then((res) => {
            if (res) {
                this.finishRequest = true
                if (refresh) {
                    this.setState({ team_list: res.list, pagination: res.pagination, loading: false, refreshing: false })
                } else {
                    this.setState({ team_list: this.state.team_list.concat(res.list), pagination: res.pagination, loading: false, refreshing: false })
                }
            } else {
                this.setState({ loading: false, refreshing: false })
            }
        })
    }
    onEndReached() {
        if (this.state.team_list.length != 0 && this.state.team_list.length != this.state.pagination.total) {
            this.page += 1
            this.getDataList(false)
        }
    }
    renderItem({ item, index }) {
        return (
            <TouchableOpacity style={{ backgroundColor: "#ffffff", padding: 15, flexDirection: 'row', justifyContent: 'space-between', borderRadius: 8, marginTop: 15, marginHorizontal: 15 }} activeOpacity={0.8} onPress={() => {
                Actions.teamManagerView({ title: item.real_name, users_id: item.id, mobile: item.mobile })
            }}>
                <View style={{}}>
                    <Text style={{ fontSize: 15, color: "#333333", fontWeight: 'bold' }}>{item.real_name}</Text>
                    <Text style={{ fontSize: 13, color: "#999999", marginTop: 15 }}>{item.activate == "1" ? "激活时间：" + item.real_name_time : "注册时间：" + item.create_time}</Text>
                </View>
                {
                    this.props.userInfo.user.id === this.props.usersId
                    ?
                    <TouchableOpacity activeOpacity={0.8} onPress={() => {
                        Linking.openURL(`tel:${item.mobile}`)
                    }} style={{ justifyContent: 'center' }}>
                        <Image style={{ width: 20, height: 20, alignSelf: 'center' }} source={ImageRes.team_phone} resizeMode={'contain'}></Image>
                    </TouchableOpacity>
                    :null
                }
                
                {/* <Image style={{ width: 10, height: 16, alignSelf: 'center' }} source={ImageRes.team_right_arrow}></Image> */}
            </TouchableOpacity >
        )
    }
    render() {
        return (
            <View style={{ flex: 1 }}>
                <FlatList
                    ref={(list) => (this.flatList = list)}
                    keyExtractor={(item, index) => index.toString()}
                    data={this.state.team_list}
                    ItemSeparatorComponent={() => <View style={{ backgroundColor: Colors.bg_color, height: 1 }} />}
                    showsVerticalScrollIndicator={false}
                    renderItem={this.renderItem.bind(this)}
                    refreshing={this.state.refreshing}
                    onEndReachedThreshold={0.1}
                    onRefresh={() => {
                        this.page = 1
                        this.getDataList(true)
                    }}
                    onEndReached={() => {
                        this.onEndReached();
                    }}
                />
                <ProgressView show={this.state.loading} />
            </View>
        )
    }
}
const TabBar = (props) => {
    let { tabs, activeTab, goToPage } = props;
    return (
        <View style={{ backgroundColor: Colors.white_color, width: Dimens.DeviceWidth, height: 50, flexDirection: 'row' }}>
            {tabs.map((tab, i) => (
                <TouchableOpacity onPress={() => {
                    goToPage(i)
                    DeviceEventEmitter.emit('ChangeIndex', { index: i })
                }} activeOpacity={0.8} key={i} style={{ flex: 1, height: 50, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 15, backgroundColor: Colors.white_color }}>
                    <View style={{ flexDirection: 'row' }}>
                        <Text style={{ color: (activeTab == i ? '#378EFB' : "#333333"), fontSize: 14, alignSelf: 'center' }}>{tab}</Text>
                    </View>
                    <View style={{ width: 100, height: 3, backgroundColor: (activeTab == i ? "#378EFB" : 'transparent'), position: 'absolute', bottom: 0, alignSelf: 'center' }} />
                </TouchableOpacity>
            ))}
        </View>
    )
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Colors.bg_color,
    }
});
const ExportView = connect()(TeamManagerListView);
module.exports.TeamManagerListView = ExportView
